<!-- 项目管理 -->
<template>
    <div >
        <div class='table-page-search-wrapper'>
            <a-form layout='inline'>
               <a-row :gutter='48'>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="项目名称">
                            <a-input v-model="projectName" placeholder="请输入项目名称" allow-clear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item label="供应商">
                            <a-input v-model="companyName" placeholder="请输入供应商" allow-clear></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :md='16' :sm='24'>
                        <a-form-item label="发布时间">
                            <a-range-picker @change="onDateChange" />
                        </a-form-item>
                    </a-col>
                    <a-col :md='8' :sm='24'>
                        <a-form-item >
                            <a-button type='primary' @click="getData">查询</a-button>
                            <a-button style="margin: 0 20px" @click="reset">重置</a-button>
                            <a-button type='primary' @click="editProject">发布项目</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>  

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ total: total ,showSizeChanger: true,pageSize: size,}" size="small" :scroll="{ x: 1500, }">
            <div slot="projectContract" slot-scope="text,record">
                <div v-if="record.projectContract">{{record.projectContract.contractNum}}</div>
            </div>
            <div slot="projectContract1" slot-scope="text,record">
                <div v-if="record.projectContract">{{record.projectContract.contractName}}</div>
            </div>
            <div slot="projectContract2" slot-scope="text,record">
                <div v-if="record.projectContract">{{record.projectContract.signTime}}</div>
            </div>
            <div slot="joinCount" slot-scope="joinCount">
                <div>{{joinCount ?? 0}}</div>
            </div>
            <div slot="signCount" slot-scope="signCount">
                <div>{{signCount ?? 0}}</div>
            </div>
            <div slot="state" slot-scope="state">
                <a-badge :status="state | projectStatusTypeFilter" :text="state | projectStatusFilter" />
            </div>
            <div slot="operation" slot-scope="text,record">
                <div class="editable-row-operations">
                    <a-button type="link" @click="detail(record)">详情</a-button>
                    <a-popconfirm
                        title="是否结束当前项目?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="setStatus(record,2)"
                        v-if="record.state == 1"
                    >
                        <a-button type="link">结束</a-button>
                    </a-popconfirm>
                    <a-popconfirm
                        title="是否开启当前项目?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="setStatus(record,1)"
                        v-else
                    >
                        <a-button type="link">开启</a-button>
                    </a-popconfirm>
                </div>
            </div>
        </a-table>

        <!-- 查看协议内容 -->
        <a-modal 
            v-model="visible" 
            :maskClosable="false"
            :closable="false"
            width="80%">
            <div class="flex flexColumn" style="height: 75vh">
                <h1 style="text-align: center;">{{agreement[activeKeyList[active]].name}}</h1>
                <div class="allFlex">
                    <iframe :src="agreement[activeKeyList[active]].url" frameborder="0" style="width: 100%;height: 100%"></iframe>
                    <!-- <iframe :src="'http://system.shanghaigejin.com/#/systems/agreement'" frameborder="0" style="width: 100%;height: 100%"></iframe> -->
                </div>
            </div>
            <div slot="footer">
                <div class="flex spaceBetween alignCenter">
                    <div>
                        <a-checkbox v-model="checked" >请先阅读并同意《用户服务协议》、《个人信息保护政策》、《隐私政策》后，可使用系统</a-checkbox>
                    </div>
                    <div class="flex alignCenter">
                        <a-button v-if="active > 0" @click="active--">上一页</a-button>
                        <a-button type='primary' @click="handleOk">{{active == 2 ? '确定' : '下一页'}}</a-button>
                    </div>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { getProjectList , changeProjectState } from '@/api/services/project';
import { getAgreement } from '@/api/system';
import storage from 'store'
export default {
    data () {
        return {
            projectName: '', // 项目名称
            companyName: '', // 所属公司
            startTime: '', // 开始时间
            endTime: '', // 结束时间
            page: 1,
            size: 10,
            dataList: [],
            total: 0,
            isload: false,
            columns,
            agreement: {
                'USER_INFO': {
                    'name': '个人信息保护政策',
                    'url': '',
                },
                'USER_SERVICE': {
                    'name': '用户服务协议',
                    'url': '',
                },
                'USER_PRIVACY': {
                    'name': '隐私政策',
                    'url': '',
                },
            },
            hasLogin: 0,
            visible: false,
            active: 0,
            activeKeyList: ['USER_INFO','USER_SERVICE','USER_PRIVACY'],
            checked: false, // 是否同意协议
        };
    },
    filters: {
        statusFilter (type) {
            return statusMap[type].text
        },
        statusTypeFilter (type) {
            return statusMap[type].status
        }
    },
    created(){
        this.getData();
        this.hasLogin = localStorage.getItem('hasLogin');
        if(this.hasLogin != 1){
            this.queryAgreement();
        }
    },
    methods: {
        // 日期筛选
        onDateChange(date,dateStr){
            console.log(date,dateStr)
            if(date.length > 0){
                this.startTime = `${dateStr[0]}`
                this.endTime = `${dateStr[1]}`
            }else{
                this.startTime = ''
                this.endTime = ''
            }
            this.getData()
        },
        // 获取项目列表数据
        getData(){
            let _this = this
            _this.isload = true;
            const params = {
                'pageSize': _this.size,
                'pageIndex': _this.page,
                'endTime': _this.endTime,
                'startTime': _this.startTime,
                'projectName': _this.projectName,
                'companyName': _this.companyName,
                'state': _this.state,
            }
            getProjectList(params)
            .then(res=>{
                _this.isload = false;
                if(res.success){
                    _this.dataList = res.data;
                    _this.total = res.totalCount;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 重置项目
        reset(){
            this.projectName = ''
            this.companyName = ''
            this.startTime = ''
            this.endTime = ''
            this.page = 1;
            this.getData();
        },
        // 发布项目
        editProject(){
            this.$router.push({path: '/companysProjects/editProject', query: {}})
        },
        // 查看详情
        detail(item){
            this.$router.push({path: '/companysProjects/projectDetail', query: {'projectId': item.id}})
        },
        // 项目状态切换
        setStatus(item,state){
            let _this = this
            const params = {
                'projectId': item.id,
                'state': state,
            }
            changeProjectState(params)
            .then(res=> {
                if(res.success){
                    _this.getData();
                    _this.$notification['success']({
                        message: '温馨提示',
                        description: state == 1 ? '当前项目开启成功' : '当前项目结束成功',
                        duration: 8
                    })
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        // 获取用户协议信息
        queryAgreement(){
            let _this = this;
            getAgreement()
            .then(res => {
                if(res.success){
                    res.data.forEach(item => {
                        _this.agreement[item.agreementKey].url = item.agreementContext
                    })
                    _this.visible = true;
                }else{
                    _this.$notification['error']({
                        message: '温馨提示',
                        description: res.errMessage,
                        duration: 8
                    })
                }
            })
        },
        handleOk(){
            if(!this.checked){
                this.$message.warning('请阅读协议，并同意！')
                return;
            }
            if(this.active != 2){
                this.active++;
                this.checked = false;
            }else{
                localStorage.setItem('hasLogin',1)
                this.visible = false;
            }
        },
    }
}
const statusMap = {
    0: {
        status: 'default',
        text: '已结束'
    },
    1: {
        status: 'processing',
        text: '运行中'
    },
    2: {
        status: 'success',
        text: '已上线'
    },
    3: {
        status: 'error',
        text: '异常'
    }
}
</script>
<style scoped>

</style>